import React, { Component } from 'react';
import { Card, Button, List, Avatar, Badge, Spin } from 'antd';
import { connect } from 'react-redux';
import {
  markNotificationsAsReadById,
  markAllNotificationsAsRead
} from '../../actions/notification';
const mapState = state => {
  const { list, loading } = state.Notifications;
  return {
    list,
    loading
  };
};
@connect(mapState, { markNotificationsAsReadById, markAllNotificationsAsRead })
class Notifications extends Component {
  render() {
    return (
      <Spin spinning={this.props.loading}>
        <Card
          title="通知中心"
          extra={
            <Button
              onClick={this.props.markAllNotificationsAsRead}
              disabled={this.props.list.every(item => item.hasRead)}
            >
              全部标记为已读
            </Button>
          }
        >
          <List
            itemLayout="horizontal"
            dataSource={this.props.list}
            renderItem={item => (
              <List.Item
                extra={
                  <Button
                    onClick={this.props.markNotificationsAsReadById.bind(
                      this,
                      item.id
                    )}
                  >
                    {item.hasRead ? '撤销已读' : '标记为已读'}
                  </Button>
                }
              >
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={
                    <a href="https://ant.design">
                      <Badge dot={!item.hasRead}>{item.title}</Badge>
                    </a>
                  }
                  description={item.description}
                />
              </List.Item>
            )}
          />
        </Card>
      </Spin>
    );
  }
}
export default Notifications;
